<template>
  <el-dialog
    title="合同信息"
    :visible.sync="centerDialogVisible"
    width="80%"
    center
    @open="init"
  >
    <div style="max-height: 600px;overflow-y: auto;padding: 10px">
      <el-form ref="cuForm" v-loading="formLoading" class="cuForm" :model="cuForm"
               label-width="100px" center size="mini"
               :disabled="true"
      >
        <div class="contract_title">合同编号：
          <span :class="cuForm.contract_num?'text-red':''">
            {{ cuForm.contract_num ? cuForm.contract_num : '提交后自动生成编号' }}
          </span>
        </div>
        <div class="contract_content">
          <p>项目名称：
            <el-form-item prop="customer_id">
              {{ (customer_arr.find(item => item.id === cuForm.customer_id) || {}).name }}
            </el-form-item>
          </p>
          <p>甲方名称：
            <el-form-item prop="part_a">
              {{ cuForm.part_a }}
            </el-form-item>
          </p>
          <p>乙方名称：
            <el-form-item prop="part_b_name">
              {{ cuForm.part_b_name }}
            </el-form-item>
          </p>
          <p>甲、乙双方根据相关法律法规的规定，关于甲方委托乙方发布广告事宜达成如下一致意见，以资共同遵守：</p>
          <p><span class="p_title">第一条：</span>广告发布概况：</p>
          <div>
            <el-table :header-row-style="{'line-height':'38px'}" class="fill_table" :data="cuForm.mediaDetailList"
                      stripe border
                      style="width: 80%;margin: 10px auto"
            >
              <el-table-column label="媒体类型" align="center">
                <template slot-scope="scope">
                  <el-form-item style="margin: 18px 0" :prop="'mediaDetailList.'+scope.$index+'.media_type_id'"
                                :rules="{required: true, message: '媒体类型不能为空', trigger: 'change'}"
                  >
                    {{ (point_type_arr.find(item => item.id === scope.row.media_type_id) || {}).name }}
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="规格" align="center">
                <template slot-scope="scope">
                  <el-form-item style="margin: 18px 0" :prop="'mediaDetailList.'+scope.$index+'.media_type_spec_id'"
                                :rules="{required: true, message: '规格不能为空', trigger: 'change'}"
                  >
                    {{ scope.row.media_type_spec_id }}
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="数量" align="center">
                <template slot-scope="scope">
                  <el-form-item style="margin: 18px 0" :prop="'mediaDetailList.'+scope.$index+'.quantity'"
                                :rules="{required: true, message: '数量不能为空', trigger: 'blur'}"
                  >
                    {{ scope.row.quantity }}
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="时长/周期" align="center">
                <template slot-scope="scope">
                  <el-form-item style="margin: 18px 0" :prop="'mediaDetailList.'+scope.$index+'.duration'"
                                :rules="{required: true, message: '时长不能为空', trigger: 'blur'}"
                  >
                    {{ scope.row.duration }}
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="金额" align="center">
                <template slot-scope="scope">
                  <el-form-item style="margin: 18px 0" :prop="'mediaDetailList.'+scope.$index+'.amount'"
                                :rules="{required: true, message: '金额不能为空', trigger: 'blur'}"
                  >
                    {{ scope.row.amount + '元' }}
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table>
            <el-table :header-row-style="{'line-height':'38px'}" class="fill_table" :data="cuForm.proxyMediaDetailList"
                      stripe border
                      style="width: 80%;margin: 10px auto"
            >
              <el-table-column label="代理媒体" align="center">
                <template slot-scope="scope">
                  <el-form-item style="margin: 18px 0" :prop="'proxyMediaDetailList.'+scope.$index+'.proxy_media_type'"
                                :rules="{required: true, message: '代理媒体不能为空', trigger: 'blur'}"
                  >
                    {{ scope.row.proxy_media_type }}
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="规格" align="center">
                <template slot-scope="scope">
                  <el-form-item style="margin: 18px 0" :prop="'proxyMediaDetailList.'+scope.$index+'.media_type_spec'"
                                :rules="{required: true, message: '规格不能为空', trigger: 'blur'}"
                  >
                    {{ scope.row.media_type_spec }}
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="数量" align="center">
                <template slot-scope="scope">
                  <el-form-item style="margin: 18px 0" :prop="'proxyMediaDetailList.'+scope.$index+'.quantity'"
                                :rules="{required: true, message: '数量不能为空', trigger: 'blur'}"
                  >
                    {{ scope.row.quantity }}
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="时长/周期" align="center">
                <template slot-scope="scope">
                  <el-form-item style="margin: 18px 0" :prop="'proxyMediaDetailList.'+scope.$index+'.duration'"
                                :rules="{required: true, message: '时长不能为空', trigger: 'blur'}"
                  >
                    {{ scope.row.duration }}
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="金额" align="center">
                <template slot-scope="scope">
                  <el-form-item style="margin: 18px 0" :prop="'proxyMediaDetailList.'+scope.$index+'.amount'"
                                :rules="{required: true, message: '金额不能为空', trigger: 'blur'}"
                  >
                    {{ scope.row.amount }}
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <p><span class="p_title">第二条：</span>广告发布价格及付款方式：</p>
          <p>1、优惠价格：人民币
            <el-form-item prop="discounted_price">
              <span style="font-size: 18px">{{ cuForm.discounted_price ? cuForm.discounted_price : '0' }}</span>
            </el-form-item>
            元
            (大写 {{ cuForm.discounted_price_big }})（
            <el-form-item>
              <el-checkbox v-model="cuForm.contain_tax"/>
            </el-form-item>
            此价格为不含税价格
            <span v-show="cuForm.contain_tax">
              ，开票另计
              {{ cuForm.tax_percent }}
              %的税费）
            </span>
            <span v-show="!cuForm.contain_tax">
              ）
            </span>
            <br>
            <span style="padding-left: 30px"/>其中，自有资源
            <el-form-item>
              <span style="font-size: 18px">{{ cuForm.self_price ? cuForm.self_price : '0' }}</span>
            </el-form-item>
            元
            (大写 {{ self_price_big }})；
            代理资源
            <el-form-item>
              <span style="font-size: 18px">{{ cuForm.proxy_price ? cuForm.proxy_price : '0' }}</span>
            </el-form-item>
            元
            (大写 {{ proxy_price_big }}),
          </p>
          <p>2、画面更换费用另计：
            {{ cuForm.replace_price }}
            元/幅/次
          </p>
          <p>3、支付方式：现金人民币
            {{ cuForm.pay_cash_amount ? cuForm.pay_cash_amount : '0' }}元
            ，(大写 {{ cuForm.pay_cash_amount_big }} )；置换人民币
            {{ cuForm.displace_amount ? cuForm.displace_amount : '0' }}元
            ，(大写 {{ cuForm.displace_amount_big }} )<br>
            备注：
            {{ cuForm.memo }}
            <el-table :header-row-style="{'line-height':'38px'}" class="fill_table" :data="cuForm.payDetailList"
                      style="margin-top: 10px" border
            >
              <el-table-column label="付款时间" align="center">
                <template slot-scope="scope">
                  <el-form-item style="margin: 18px 0" :prop="'payDetailList.'+scope.$index+'.pay_time'"
                                :rules="{required: true, message: '付款时间不能为空', trigger: 'change'}"
                  >
                    {{ scope.row.pay_time }}
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="付款金额" align="center">
                <template slot-scope="scope">
                  <el-form-item style="margin: 18px 0" :prop="'payDetailList.'+scope.$index+'.pay_amount'"
                                :rules="{required: true, message: '付款金额不能为空', trigger: 'blur'}"
                  >
                    {{ scope.row.pay_amount }}
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="付款方式" align="center">
                <template slot-scope="scope">
                  <el-form-item style="margin: 18px 0" :prop="'payDetailList.'+scope.$index+'.pay_type'"
                                :rules="{required: true, message: '付款方式不能为空', trigger: 'change'}"
                  >
                    {{ scope.row.pay_type === 1 ? '现金' : '置换' }}
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table>
          </p>
          <p>4、甲方经办人联系方式：
            <el-form-item prop="part_a_contact">
              {{ cuForm.part_a_contact }}
            </el-form-item>
            ，乙方经办人联系方式：
            <el-form-item prop="part_b_contact">
              {{ cuForm.part_b_contact }}
            </el-form-item>
            。注：合作过程中，双方如需更换具体经办人，需要协商一致并书面确认。
          </p>
          <p>5、上述广告发布费支付至乙方如下帐户：</p>
          <p>开户名：
            <el-form-item prop="bank_account_name">
              {{ cuForm.bank_account_name }}
            </el-form-item>
          </p>
          <p>开户行：
            <el-form-item prop="bank_name">
              {{ cuForm.bank_name }}
            </el-form-item>
          </p>
          <p>帐号：
            <el-form-item prop="bank_num">
              {{ cuForm.bank_num }}
            </el-form-item>
          </p>
          <p><span class="p_title">第三条：</span>合同期限</p>
          <p>合同期限为
            <el-form-item prop="contract_begin_date">
              {{ cuForm.contract_begin_date }}
            </el-form-item>
            至
            <el-form-item prop="contract_end_date">
              {{ cuForm.contract_end_date }}
            </el-form-item>
            止。
          </p>
          <p><span class="p_title">第四条：</span>双方的权利和义务：</p>
          <p>1、乙方按照合同约定发布广告。</p>
          <p>2、如广告发布起始日期因乙方原因而延误15天以内（含15天），则甲方可以自由选择：A、经双方协商后，在广告发布期末补足延误的时间； B、乙方按实际发布时间收取广告费。
          </p>
          <p>
            3、如广告发布起始日期因乙方原因而延误15天以上，则甲方可以更改广告发布期。如甲方认为不需要更改广告发布期，可以要求解除广告发布合同或要求乙方按实际发布时间收取广告费，同时乙方自愿对甲方进行补偿，补偿的计算方式如下：延误的天数×延误部分广告每天的广告发布费。
          </p>
          <p>
            4、乙方为甲方发布广告，广告采用甲方提供的画面和内容。未经甲方同意，乙方不得修改广告内容。广告发布前7个工作日，甲方须向乙方提供广告画面文件及相关广告素材（为保证制作质量，须提供高清晰视频文件），乙方收取甲方提供的画面和内容以后，向甲方出具回执单以确认收取。
          </p>
          <p>
            5、如因甲方未能如期提供相关素材或因甲方原因导致乙方无法如期发布广告，则乙方不承担任何责任，乙方已经收取的费用不予退还。
          </p>
          <p>
            6、甲方保证广告发布的内容符合国家相关法律法规的规定，乙方仅负责为甲方发布广告，不承担因甲方广告内容导致的所有责任及赔偿。如因广告发布的内容引起纠纷，则由甲方负责处理并承担全部责任，同时乙方有权停止播放、解除合同，如果造成乙方损失的，乙方有权向甲方追偿或要求甲方赔偿。
          </p>
          <p><span class="p_title">第五条：</span>广告审报与备案</p>
          <p>
            1、甲方应根据相关规定办理广告申报与备案等相关手续。
          </p>
          <p>
            2、甲方应在广告发布前七个工作日向乙方提供相关审报备案等文件及证明资料，如甲方提供的广告内容不能通过主管部门审批，乙方不承担任何责任和费用。在此情况下，甲方应重新制作，所有费用均由甲方自行承担，并按照甲、乙双方合同约定继续履行合同，广告发布期可另行协议。
          </p>
          <p>
            3、在广告内容通过主管部门审批备案后，乙方应及时发布广告。
          </p>
          <p>
            <span class="p_title">第六条：</span>广告发布及验收
          </p>
          <p>
            1、因不属于乙方原因（包括但不限于公益宣传活动、重大社会事件、政府行政行为、重大自然灾害、设备出现故障等）而导致广告不能按约定发布或导致广告发布期有所调整，甲方同意乙方不需承担任何责任及因此造成的损失，延误的发布时间经双方协商一致后在广告发布期末补足。
          </p>
          <p>
            2、甲、乙双方同意按以下第
            {{ cuForm.acceptance_way }}
            种方式进行验收：
          </p>
          <p>
            A、现场验收：甲方有权于广告上刊后3日内及广告发布期届满之日对广告发布情况进行现场验收，由甲方人员对符合要求的广告发布予以确认（当场签署验收意见），如甲方存在异议应于验收当日向乙方书面提出。若甲方逾期未到验收现场或逾期未提出书面异议的额，则视为广告发布符合甲方要求且乙方已按约履行广告发布义务。
          </p>
          <p>
            B、画面情况报送验收：乙方于广告上刊后7日内及广告下刊后7日内将广告上、下刊画面等资料通过电子邮件或电子信息等方式发送甲方，甲方收到信息后如有异议应于3日内书面提出，逾期视为广告发布符合甲方要求且乙方已按约履行广告发布义务。
          </p>
          <p>
            <span class="p_title">第七条：</span>违约责任
          </p>
          <p>
            1、如甲方不能按时足额付款，则乙方可立即停止广告发布。在这种情况下，甲方不可要求乙方返还其已支付的广告费，且甲方应向乙方支付违约金，违约金的计算方式为：自违约之日起至甲
            方实际履行之日止，每日按应付广告费的千分之五计算支付。
          </p>
          <p>
            2、如因本合同第四条第三款以外的原因，甲方提出解除合同，则甲方应向乙方足额支付本合同第三条第一款约定的优惠价格。
          </p>
          <p>
            3、如乙方提出解除合同，则A、如果甲方尚未支付任何广告费用，则甲方应无条件答应合同解除；B、如果甲方已经支付了部分广告费用，但该部分广告费用不足以支付已经发布的广告产生的费用，甲方应向乙方补足应付的广告发布费用；C、如果甲方已经支付了部分广告费用，且该部分广告费用已经超过了甲方应实际支付的发布费用的，则乙方应将超过部分退还给甲方。
          </p>
          <p>
            <span class="p_title">第八条：</span>合同优惠价格中只包含首次视频画面编辑制作费用，如需多次更换视频画面内容，以
            {{ cuForm.multi_replace_price }}
            元/张内容计算。
          </p>
          <p>
            <span class="p_title">第九条：</span>其他约定：
            {{ cuForm.other_memo }}
          </p>
          <p>
            <span class="p_title">第十条：</span>本协议履行过程中发生争议，双方应友好协商，协商不成由乙方所在地人民法院管辖处理。甲、乙双方一致确认本合同首部所列地址为双方指定的送达之地，任何与本合同相关的文件（包括解决争议的任何文书）送达均以此为准，任何文件一旦首次到达对方指定送达地址之日起即视为送达。除另有约定外，双方在本合同载明的联系地址发生变更时，应以书面形式及时通知对方。
          </p>
          <p>
            <span class="p_title">第十一条：</span>此合同一式贰份，经双方签字或盖章后生效，甲、乙双方各执一份。
          </p>
          <p>
            <el-row>
              <el-col :span="12">甲方（签章）：</el-col>
              <el-col :span="12">乙方（签章）：</el-col>
            </el-row>
          </p>
          <p>
            <el-row>
              <el-col :span="12">经办人（签字）：</el-col>
              <el-col :span="12"> 经办人（签字）：</el-col>
            </el-row>
          </p>
          <p style="text-align: right">签订日期：
            <el-form-item prop="sign_date">
              {{ cuForm.sign_date }}
            </el-form-item>
          </p>
        </div>
        <div class="two_title">附件信息</div>
        <el-table :data="cuForm.attachmentList" size="mini" border stripe style="width: 80%;margin: 0 auto">
          <el-table-column label="序号" width="50" align="center">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="合同名称" prop="name" min-width="300" align="center"/>
          <el-table-column label="操作" width="250" align="center">
            <template slot-scope="scope">
              <el-button-group>
                <el-button size="mini" type="success" :disabled="false" @click="look(scope.row.url)">预览
                </el-button>
                <el-button size="mini" type="primary" :disabled="false" @click="download(scope.row.url)">下载查看
                </el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button size="mini" @click="centerDialogVisible = false">关 闭</el-button>
  </span>
  </el-dialog>
</template>

<script>
import { company_list_all } from '@/api/customer/customer'
import { get_company } from '@/api/system/department'
import { amountToBigStr } from '@/utils/amount'
import { detail } from '@/api/contract'
import { listTypeSpecByMediaTypeId } from '@/api/media/specs'
import { list_media_types } from '@/api/building/building'

export default {
  name: 'ContractDialog',
  props: {
    contract_id: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      cuForm: {
        id: null,
        // 合同编号
        contract_num: null,
        // 客户ID（项目名称）
        customer_id: null,
        // 甲方
        part_a: null,
        // 乙方id
        part_b_id: null,
        // 乙方名称
        part_b_name: null,
        // 甲方人联系方式
        part_a_contact: null,
        // 乙方人联系方式
        part_b_contact: null,
        // 开户名
        bank_account_name: null,
        // 开户行名
        bank_name: null,
        // 开户号
        bank_num: null,
        // 合同开始日期
        contract_begin_date: null,
        // 合同结束日期
        contract_end_date: null,
        // 签订日期
        sign_date: null,
        // 优惠价格
        discounted_price: null,
        // 优惠价格（大写)
        discounted_price_big: null,
        // todo new
        // 是否含税
        contain_tax: false,
        // todo new
        // 另收**%税费
        tax_percent: null,
        // 自有资源价格
        self_price: null,
        // todo new
        // 自有资源价格（大写)
        self_price_big: null,
        // 代理资源价格")
        proxy_price: null,
        // todo new
        // 代理资源价格（大写）
        proxy_price_big: null,
        // 画面更换价格
        replace_price: null,
        // todo new
        // 现金支付金额
        pay_cash_amount: null,
        // todo new
        // 现金支付金额（大写）
        pay_cash_amount_big: null,
        // todo new
        // 置换金额
        displace_amount: null,
        // todo new
        // 置换金额（大写）
        displace_amount_big: null,
        // 多次换画价格
        multi_replace_price: null,
        // 验收方式
        acceptance_way: null,
        // 备注
        memo: null,
        other_memo: null,
        // 父合同ID，补充协议时使用，普通合同不传
        parent_id: null,
        // 自身媒体资源明细
        mediaDetailList: [],
        // 附件id列表
        attachmentList: [],
        // 代理情况明细
        proxyMediaDetailList: [],
        // 付款明细
        payDetailList: []
      },
      formLoading: false,
      customer_arr: [],
      selectDept: null,
      dept_list: [],
      centerDialogVisible: false,
      point_type_arr: []
    }
  },
  computed: {
    self_price_big() {
      return amountToBigStr(this.cuForm.self_price)
    },
    proxy_price_big() {
      return amountToBigStr(this.cuForm.proxy_price)
    }
  },
  created() {
    this.initPointTypeArr()
    this.initCustomerList()
  },
  methods: {
    initCustomerList() {
      company_list_all().then(res => {
        this.customer_arr = res.data
      })
    },
    look(url) {
      const fileName = url.substring(url.lastIndexOf('.') + 1)
      if (fileName === 'pdf') {
        window.open(url, '_blank')
      } else {
        const str = 'https://view.officeapps.live.com/op/view.aspx?src=' + url
        window.open(str, '_blank')
      }
    },
    download(url) {
      if (url) {
        window.open(url, '_blank')
      } else {
        this.$message.error('文件不存在！请联系管理员')
      }
    },
    open() {
      this.centerDialogVisible = true
    },
    initPointTypeArr() {
      list_media_types().then(
        res => {
          this.point_type_arr = res.data
        }
      )
    },
    init() {
      this.formLoading = true
      this.initCustomerList()
      get_company().then(res => {
        this.dept_list = res.data
      })
      detail(this.contract_id).then(res => {
        this.formLoading = false
        this.cuForm = res.data
        this.cuForm.mediaDetailList.forEach(item => {
          listTypeSpecByMediaTypeId({ mediaTypeId: item.media_type_id }).then(res => {
            this.$set(item, 'media_type_spec_arr', res.data)
          })
        })
        this.selectDept = this.dept_list.find(item => item.id === this.cuForm.part_b_id)
      })
    }
  }
}
</script>

<style scoped>
/deep/ .cuForm .el-form-item {
  margin-bottom: 0;
  display: inline-block;
}

/**
去除el-form-item__content的左边距
 */
/deep/ .cuForm .el-form-item__content {
  margin-left: 0 !important;
  display: inline-block;
}

.contract_content p {
  line-height: 30px;
  font-size: 14px;
}

.p_title {
  font-weight: bold;
}

</style>
